<style lang="less">
    @import '../styles/menu.less';
</style>

<template>
    <!-- <Menu mode="horizontal" ref="sideMenu" active-name="1" theme="light" width="auto" @on-select="changeMenu">
        <MenuItem :name="item.name" v-for="item in menuList">
            <Icon :type="item.icon"></Icon>
            <span>123123</span>{{item.title}}
        </MenuItem>
    </Menu> -->
     <Menu mode="horizontal" theme="light" :active-name="$route.name" @on-select="getParentName" @on-change="handleChange" :open-names="openNames">
        <MenuItem :name="item.name" v-for="item in menuList" >
            <Icon :type="item.icon"></Icon>
            {{item.title}}
        </MenuItem>
    </Menu>
</template>

<script>
export default {
    name: 'sidebarMenu',
    props: {
        menuList: Array,
        // childmenulist: childmenulist,
        iconSize: Number,
        menuTheme: {
            type: String,
            default: 'dark'
        },
        openNames: {
            type: Array
        },
        openNames: {
            type: Array
        }
    },
    methods: {
        // changeMenu (active) {
        //     this.$emit('on-change', active);
        // },
        beforePush (name) {
                return true;
        },
        handleChange (name) {
            let willpush = true;
            if (this.beforePush !== undefined) {
                if (!this.beforePush(name)) {
                    willpush = false;
                }
            }
            if (willpush) {
                this.$router.push({
                    name: name
                });
            }
            this.$emit('on-change', name);
        },
        getParentName(active){
            this.$store.state.app.menuParentName = active
            this.menuList.some(item=>{
                if(item.name===active){
                    this.$store.state.app.menuListChild=item;
                    return
                }
            })
            this.handleChange(active)
        },
        getChildList(){
            this.menuList.some(item=>{
                if(item.name==='message'){
                    this.$store.state.app.menuListChild=item
                }
            })
        }
    },
    updated () {
        this.$nextTick(() => {
            if (this.$refs.sideMenu) {
                this.$refs.sideMenu.updateOpened();
            }
        });
    },
    created(){
        this.getChildList()
    }

};
</script>
